/**
 * aqiData，存储用户输入的空气指数数据
 * 示例格式：
 * aqiData = {
 *    "北京": 90,
 *    "上海": 40
 * };
 */
function load() {
  init();
}
var aqiData = {};
/**
 * 从用户输入中获取数据，向aqiData中增加一条数据
 * 然后渲染aqi-list列表，增加新增的数据
 */
function addAqiData() {
  var city = document.getElementById("aqi-city-input").value;
  if (!/^[\u4E00-\u9FA5a-zA-z]+$/.test(city)) {
    alert("please input Chinese or English");
    return;
  }
  var number = document.getElementById("aqi-value-input").value;
  if (!/^[0-9]+$/.test(number)) {
    alert("please input number");
    return;
  }
  aqiData[city] = number;
}
/**
 * 渲染aqi-table表格
 * 
 */

function renderAqiList() {
  var table = document.getElementById("aqi-table");
  var r_length = table.rows.length;
  var tmp = r_length;
  var i = 1;
  while (i < tmp) {
    table.deleteRow(i);
    tmp--;
  }
  if (r_length === 0) {
    var th = document.createElement("tr");
    var data1 = ["city", "quality", "operation"];
    for (var i = 0; i < 3; i++) {
      td = document.createElement("td");
      td_node = document.createTextNode(data1[i]);
      td.appendChild(td_node);
      th.appendChild(td);
    }
    table.appendChild(th);
  }
  for (var j in aqiData) {
    tr = document.createElement("tr");
    data2 = [j, aqiData[j]];
    for (var i = 0; i < 2; i++) {
      td = document.createElement("td");
      td_node = document.createTextNode(data2[i]);
      td.appendChild(td_node);
      tr.appendChild(td);
    }
    td_button = document.createElement("td");
    del_button = document.createElement("button");
    del_button.onclick = function () {
      delBtnHandle(this);
    }
    var del_text = document.createTextNode("delete");
    del_button.appendChild(del_text);
    td_button.appendChild(del_button);
    tr.appendChild(td_button);
    table.appendChild(tr);
  }
}

/**
 * 点击add-btn时的处理逻辑
 * 获取用户输入，更新数据，并进行页面呈现的更新
 */
function addBtnHandle() {
  addAqiData();
  renderAqiList();
}

/**
 * 点击各个删除按钮的时候的处理逻辑
 * 获取哪个城市数据被删，删除数据，更新表格显示
 */
function delBtnHandle(obj) {
  // do sth.
  var tr_del = obj.parentElement.parentElement;
  for (var i in aqiData) {
    if (i === tr_del.children[0].innerText) {
      delete aqiData[i];
    }
  }
  renderAqiList();
}

function init() {
  // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
  var button_add = document.getElementById("add-btn");
  button_add.onclick = function () {
    addBtnHandle();
  };
  // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
}

